<template>
  <div class="xuncha-admin">
    <div class="content-wrapper">
      <!-- 左侧统计卡片 -->
      <div class="title">专项工作概览</div>
      <!-- <a-spin :spinning="shijianKSpinning" > -->
        <div class="left-panel">
           <div v-for="(value, key, index) in dataList" :key="key"  class="sping-style" :class="index == 0 ? 'bg0' : index == 1 ? 'bg1' : index == 2 ? 'bg2' : index == 3 ? 'bg3' :index == 4 ? 'bg4' :index == 4 ? 'bg4' : 'bg5'">
               <div class="card-content">
                  <div class="title"> {{ value }}</div>
                  <div class="number">{{ key }}</div>
                  <img :src="index == 0 ? bgimg0 : index == 1 ? bgimg1 :index == 2 ? bgimg2 :index == 3 ? bgimg3 :index == 4 ? bgimg4 : bgimg5" alt="" class="imgS">
                </div>
            </div>
          </div>
      <!-- </a-spin> -->

    </div>
    <div class="shujukanban">
        <div class="pie-style">
            <div class="title">专项工作接收单位</div>
            <div class="pie-height" id="ecchartCaseGroupDept"></div>
        </div>

        <div class="baosong-style">
          <div class="title">未报送单位</div>
          <div>
            <div class="table-top new" >
              <div class="table-top-item1">单位名称</div>
              <div class="table-top-item2">未反馈任务数</div>
            </div>
            <div class="scroll-style">
              <div  v-for="(item,index) in groupArea" :key="index" class="table-body new" :class="index%2 !==0 ? '' :'indexBgColor'"> 
                <div class="table-item1">{{item.name}}</div> 
                <div class="table-item2">{{item.count}}</div>
              </div>
            </div>
            
          </div>
        </div>
    </div>
    <a-spin :spinning="shijianKSpinning" >

      <div class="shujukanban">
        <div class="pie-style" style="width:50%">
            <div class="title tabsFa">
              <div>工作通报</div>
              <div class="tabs"> 
                <span @click="tabsClick(1)" :class="tabsValue == 1? 'bg_blue':''">即将逾期的督办事件</span>
                <span @click="tabsClick(2)" :class="tabsValue == 2? 'bg_blue':''">逾期未办理的已通报事件</span>
              </div>
            </div>
            <div>
              <div class="table-top new" >
                <div class="table-top-item1" style="width:20%;">反馈单位</div>
                <div class="table-top-item2" style="width:20%;">问题来源</div>
                <div class="table-top-item3" style="width:20%;">问题类型</div>
                <div class="table-top-item4" style="width:20%;">办理时间</div>
                <div class="table-top-item5" style="width:20%;">创建时间</div>
              </div>
              <div class="scroll-style">
                <div  v-for="(item,index) in dubanIsDelay" :key="index" class="table-body new" :class="index%2 !==0 ? '' :'indexBgColor'"> 
                  <div class="table-item1 newtext1" style="width:20%;">{{item.deptName}}</div> 
                  <div class="table-item2" style="width:20%;">{{item.issueSource}}</div>
                  <div class="table-item3" style="width:20%;">{{item.issueType}}</div>
                  <div class="table-item4" style="width:20%;">{{item.deadlineTime}}</div>
                  <div class="table-item5" style="width:20%;">{{item.createTime}}</div>
                </div>
              </div>
              
            </div>
        </div>
        <div class="baosong-style"  style="width:50%">
          <div class="title">被督办单位</div>
          <div>
            <div class="table-top new" >
              <div class="table-top-item1" style="width:20%;">问题类型</div>
              <div class="table-top-item2" style="width:20%;">单位名称</div>
              <div class="table-top-item3" style="width:60%;">督办事件</div>
            </div>
            <div class="scroll-style">
              <div  v-for="(item,index) in dubanList" :key="index" class="table-body new" :class="index%2 !==0 ? '' :'indexBgColor'"> 
                <div class="table-item1" style="width:20%;">{{item.issueSource}}</div> 
                <div class="table-item2" style="width:20%;">{{item.deptName}}</div>
                <div class="table-item3" style="width:60%;">{{item.deadlineTime}}</div>
              </div>
            </div>
            
          </div>
        </div>
        
      </div>
    </a-spin>


  </div>
</template>

<script>
import * as echarts from 'echarts';
import dayjs from "dayjs";
import moment from 'moment';

export default {
  name: "XunchaAdmin",
  data() {
    return {
      currentTab: "DAY",
      queryData: {
        startTime: dayjs().format("YYYY-MM-DD"),
        endTime: dayjs().format("YYYY-MM-DD"),
        // interval: "DAY",
      },
      dataList: {},
      statisticsData: {},
      spinning: false,
      dataListLoading: false,
      shijianKSpinning: true,// 数据看板：全区部门办理事件统计
      startTime:'',
      endTime:'',
      timeDate:[ '2024-02-01 00:00:00','2025-3-19 23:59:59'],//dayjs().format("YYYY-MM-DD HH:mm:ss")
      QuestionGroup:[],
      dataDeptReport:[],
      groupArea:{},
      dubanIsDelay:[],
      dubanList:[],
      tabsValue:1,
      bgimg0:'https://head-image-1259022270.cos.ap-guangzhou.myqcloud.com/head-image-55843b1f-e2cf-4ce2-9105-80fb77687d82index-1.png',
      bgimg1:'https://head-image-1259022270.cos.ap-guangzhou.myqcloud.com/head-image-5e5976e0-e8b9-4edf-89d2-8bc688e00688inpt-time.png',
      bgimg2:'https://head-image-1259022270.cos.ap-guangzhou.myqcloud.com/head-image-efbd5095-841b-4987-a7af-cd683a651f85Gc_52_face-Acceptance (1).png',
      bgimg3:'https://head-image-1259022270.cos.ap-guangzhou.myqcloud.com/head-image-45484941-c816-4f73-aa41-a1413530f947chaoji.png',
      bgimg4:'https://head-image-1259022270.cos.ap-guangzhou.myqcloud.com/head-image-edc1f44c-e6bc-4d1c-8cc5-f3fe10406117审判法官.png',
      bgimg5:'https://head-image-1259022270.cos.ap-guangzhou.myqcloud.com/head-image-2d91c6d4-8956-4dae-a480-69dc83d26c30time-1.png',
    };
  },
  computed: {
    dateRange() {
      return [this.queryData.startTime, this.queryData.endTime];
    },
  },
  mounted() {
      
    this.getDubanGroupChant();// 专项工作预概
    this.getCaseGroupDept();// 专项工作接收单位
    this.getDubanGroupChantDept();// 未报送单位
    this.getDubanList();//被督办单位
    this.getDubanIsDelay();// 工作通报
  },
  methods: {
    moment,
   
    // 专项工作统计
    getDubanGroupChant() {
      this.dataListLoading = true;
      this.$axios
        .post("/government-platform-center/duban/getDubanGroupChant")
        .then((res) => {
          if (res.data.code === 0) {
            // console.log('----',res.data)
            this.dataList = res.data.data;
            
          }
        })
        .finally(() => {
          this.dataListLoading = false;
        });
    },
   
    // 专项工作接收单位
    getCaseGroupDept() {
        // 加载统计图
        var chartDom = document.getElementById('ecchartCaseGroupDept');
        var myChart = echarts.init(chartDom);
    
        let api = '/government-platform-center/duban/getDubanGroupChantDept';//
        this.$axios 
        .post(api,
         
        )
        .then((res) => {
            //   this.statisticsData = res.data.data;
            let data_this = []
                // console.log('data_this',res)

            if(res.data.msg == 'success'){
                let data = res.data.data;
                let option = {
                      legend: {},
                      tooltip: {},
                      dataset: {
                        dimensions: ['部门名称', '完成任务数', '接收任务数','任务完成率'],
                        source: data,
                        // [
                          // { product: 'Matcha Latte', 2015: 43.3, 2016: 85.8, 2017: 93.7 },
                          // { product: 'Milk Tea', 2015: 83.1, 2016: 73.4, 2017: 55.1 },
                          // { product: 'Cheese Cocoa', 2015: 86.4, 2016: 65.2, 2017: 82.5 },
                          // { product: 'Walnut Brownie', 2015: 72.4, 2016: 53.9, 2017: 39.1 }
                        // ]
                      },
                      xAxis: { type: 'category' },
                      yAxis: {},
                      // Declare several bar series, each will be mapped
                      // to a column of dataset.source by default.
                      series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
                    };
                myChart.setOption(option);
                
            }
           
           
          
        })
        .finally(() => {
            this.shijianKSpinning = false;
        });


        // 窗口变化时自适应
      window.addEventListener('resize', () => {
        myChart.resize();
      });
      
      // 组件销毁时销毁图表
      this.$once('hook:beforeDestroy', () => {
        myChart.dispose();
      });

    },
    // 
    mergeKeysByKeyName(arr, nameKey = "name", numbersKey = "numbers") {
      return arr.reduce((result, currentObj) => {
        Object.entries(currentObj).forEach(([key, value]) => {
          const existingItem = result.find(item => item[nameKey] === key);
          existingItem 
            ? existingItem[numbersKey].push(value)
            : result.push({ [nameKey]: key, [numbersKey]: [value] });
        });
        return result;
      }, []);
    },
    // 未报送单位
    getDubanGroupChantDept() {
      let api = '/government-platform-center/duban/getDubanGroupChantDeptNoOver';//
      this.$axios.post(api).then((res) => { 
        let data_this = [] 
        if(res.data.msg == 'success'){ 
          res.data.data.map(v=>{
            if(v.deptName){
              data_this.push({name: v.deptName,count:v.count})
            }
          })
          this.groupArea = data_this; 

        } 
      }).finally(() => {
        this.shijianKSpinning = false;
      });
    },
    // 工作通报
    getDubanIsDelay() {
      this.shijianKSpinning = true;
      let api1 = '/government-platform-center/duban/getDubanIsDelay';//即将逾期的督办事件
      let api2 = '/government-platform-center/duban/getDubanWillDelay';//逾期未办理的已通报事件
      let api = this.tabsValue == 1 ? api2 :api1;
      this.$axios.post(api).then((res) => {  
        let data_this = [] 
        if(res.data.msg == 'success'){ 
          // res.data.data.map(v=>{
          //   if(v.deptName){
          //     data_this.push({name: v.deptName,count:v.count})
          //   }
          // });
          console.log('即将逾期',res.data.data)
          this.dubanIsDelay = res.data.data; 

        } 
      }).finally(() => {
        this.shijianKSpinning = false;
      });
    },
    // 被督办单位
    getDubanList() {
      let api = '/government-platform-center/duban/getDubanList';
      this.$axios.post(api).then((res) => { 
        let data_this = [] 
        if(res.data.msg == 'success'){ 
          res.data.data.map(v=>{
            if(v.deptName){
              data_this.push({issueSource: v.issueSource ,deptName:v.deptName,deadlineTime:v.deadlineTime })
            }
          });
          // console.log('即将逾期',res.data.data)
          this.dubanList = data_this; 

        } 
      }).finally(() => {
        this.shijianKSpinning = false;
      });
    },
    tabsClick(index){
      console.log('点击----',index)
      this.tabsValue = index;
      this.getDubanIsDelay();
    },
  },
};
</script>

<style lang="scss" scoped>
.xuncha-admin {
  padding: 24px;
  height: 100%;

  .content-wrapper {
    // display: flex;
    // gap: 24px;
    // height: 100%;
    // height: 166px;
    padding: 24px;
    background-color: #ffffff;
    border-radius: 8px;
   .title {
      font-size: 16px;
      font-weight: bold;
      color: #000;
      margin-bottom: 16px;
    }
    .left-panel{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      
    }

   
  }
  .sping-style{
    // margin: 24px;
    padding: 10px;
    width: 15%;
    box-sizing: border-box;
    // background-color: rgb(245, 245, 245);
    border-radius: 10px;
    .card-content {
      height: 100%;
      box-sizing: border-box;
      position: relative;
      .title {
        font-size: 16px;
        font-weight: bold;
        color: #000;
        margin-bottom: 16px;

        .red-icon {
          color: #ff4d4f;
          margin-right: 8px;
        }

        .blue-icon {
          color: #0052d9;
          margin-right: 8px;
        }
      }

      .number {
        font-size: 14px;
        margin-top: 8px;
        color: rgba(0, 0, 0, 0.45);
      }
      .imgS{
        position: absolute;
        right: -11px;
        bottom: -10px;
        width: 50px;
        height: 50px;

      }
    }
  }
  

  
  // 1200小屏
  .shujukanban{
    display: flex;
    height: 400px;
    margin: 20px 0;
    .title{
        font-size: 14px; 
    }
    .baosong-style{
      width: 35%;
      background-color: #ffffff;
      padding:24px;
      margin-left: 20px;
      border-radius: 8px;

    }
    .pie-style{
      border-radius: 8px;
      width: 65%;
      background-color: #ffffff;
      padding: 24px;
      .pie-height{
          width: 100%;
          height: 300px;
          margin: 0 10px;
      }
    }
       
    .data-style{
        border-radius: 8px;
        display: flex;
        // align-items: center;
        justify-content: space-between;
        align-items: flex-start;

        height: fit-content;
        margin-top: 40px; 
        .item{
            width: 50%;
            height: 1005;
            .title{
                font-size: 14px; 
            }
        }
        .q-list{
            width: 80%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin: 7px 0;
        }
        .q-list .list-title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 400;
            font-size: 10px;
            color: #333333;
        }
        .t-list{
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 400;
            font-size: 11px;
            color: #333333;
        }
        .t-list div{
            width: 33.33%;
            margin: 7px;
            display: flex;
            justify-content: left;
            align-items: center;
        }
        .t-list .yuan{
            width: 8px;
            height: 8px;
            background: #4285F5;
            border: 2px solid rgba(105, 141, 255, 0.30);
            border-radius: 50%;
            margin-right: 20px;
        }
        .pie-height{
            width: 100%;
            height: 300px;
            margin: 0 10px;
        }
    }
  }
}
/* table */
.table-top,
.table-body{
	width: 100%;
	display: flex;
	align-items: center;
	margin: 7px 0;
}
.table-top{
	font-weight: 400;
	font-size: 12px;
	color: #666666;
	margin-top: 14px;
	margin-bottom: 14px;
}
.table-body{
	font-weight: 400;
	font-size: 14px;
	color: #333333;
}

.table-body.new .table-item1,
.table-top.new .table-top-item1{
  text-align: start;
	width: 40%;
}
.table-item1.newtext1{
  word-wrap: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table-body.new .table-item2,
.table-top.new .table-top-item2{
  text-align: center;
	width: 50%;
}
.table-body.new .table-item3,
.table-top.new .table-top-item3{
  text-align: center;
	width: 50%;
}
.table-body.new .table-item4,
.table-top.new .table-top-item4{
  text-align: center;
	width: 20%;
}
.table-body.new{
  padding: 10px 5px;
}
.indexBgColor{
  background-color: rgba(66,133,244,0.06);
}

.scroll-style{
  overflow-y: scroll;
  height: 288px;
}
.tabsFa{
  display: flex;
  justify-content: space-between;
  align-content: center;
  .tabs{
    display: flex;
    align-content: center;
  }
  .tabs span{
    display: flex;
    justify-content: center;
    align-content: center;
    width: 150px;
    box-sizing: border-box;
    padding: 5px 6px;
    border:1px solid rgba(37, 126, 229,.5);
    font-size: 12px;
  }
  
}
.bg0{
  background: rgb(245, 245, 245);
}
.bg1{
  background: rgb(255, 239, 239);
}
.bg2{
  background: rgb(234, 245, 237);
}
.bg3{
  background: rgb(255, 248, 235);
}
.bg4{
  background: rgb(244, 242, 255);
}
.bg5{
  background: rgb(255, 243, 235);
}
.bg_blue{
  background-color: rgb(37, 126, 229);
  color: #ffffff;
}
</style>
